import React from 'react';
import ReactDom from 'react-dom';
import {Button,Menu,Modal,Icon,Tabs,message,Form,Input,CheckBox,Pagination} from 'antd';
import 'antd/dist/antd.css';
const FormItem = Form.Item;
const SubMenu = Menu.SubMenu;
const TabPane = Tabs.TabPane;
const MenuItemGroup = Menu.MenuItemGroup;
import { Row,Col } from 'antd';
import {Router, Route, Link, browserHistory} from 'react-router';
import Header from './header';
import Footer from './footer';

export default class List extends React.Component{
	constructor(){
		super();
		this.state = {
			arcList:"",
		};
	}
    componentWillMount() {
    	// var id=this.props.params.id;
    	var myFetchOptions ={
			method:'GET'
		};
    	var res = fetch("/select?count=10",myFetchOptions);
        res.then(response => response.json()).then(json=>{
      	if(json.state){
      		this.setState({arcList:json.mes});
      	}else{
      		message.error(json.mes);
      	}
      });
    };
	render(){
		let {arcList} = this.state;
		const listContent = arcList.length ? arcList.map((valueItem,index)=>(
			<p key={index}>
				<Link to={`detaile/${valueItem._id}`} target="_blank">
					{valueItem.title}
				</Link>
			</p>
	    )) : "没有文章！";
		return (
			<div>
			    <Header/>
			    <Row>
			    	<Col span={4}></Col>
			    	<Col span={16}>
			    	    <div class="list" style={{marginBottom:"10px",marginLeft:"10px"}}>{listContent}</div>
			    	    <Pagination defaultCurrent={1} total={50} />
			    	</Col>
			    	<Col span={4}></Col>
			    </Row>
			    <Footer/>
			</div>
		);
	}
}